<template>
    <!-- 选品首页 -->
    <div>
        <!-- 头部优化完成 -->
        <BaseHeader></BaseHeader>
        <!-- 搜索栏完成 -->
        <Search @search="handleSearch" @searchHfn="searchHfn"></Search>
        <!-- 选品库完成 -->
        <drawer></drawer>
        <!-- 商品分类 -->
        <cateNav></cateNav>
        <div class="container">
            <!-- 商品筛选组件 -->
            <GoodsClassNav @getParams="getParams" @brandClick="brandClick"></GoodsClassNav>
            <!-- 选品页面 -->
            <!-- 商品展示容器 -->
            <div class="goods-box">
                <!-- 商品列表 -->
                <div class="goods-list-box">
                    <!-- 筛选 -->
                    <div class="goods-list-tool">
                        <ul>
                            <li v-for="(item, index) in goodsTool" :key="index" @click="orderBy(item.en, index)">
                                <span>{{ item.title }}
                                    <Icon type="ios-arrow-round-down" />
                                </span>
                            </li>
                            <li @click="orderBy('price', 5)" class="price-sort">
                                <span :class="{ 'goods-list-tool-active': 5 === sortIndex }">
                                    价格
                                    <div>
                                        <Icon type="md-arrow-dropup"
                                            :class="{ 'price-color': sortPriceIndex == 'desc' }" />
                                        <Icon type="md-arrow-dropdown"
                                            :class="{ 'price-color': sortPriceIndex == 'asc' }" />
                                    </div>
                                </span>
                            </li>
                        </ul>
                        <!-- -------------价格筛选------------- -->
                        <div data-v-42e75c6e="" class="price-minmax-box">
                            价格区间：
                            <div data-v-42e75c6e="" class="minmax">
                                <div data-v-42e75c6e=""
                                    class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text">
                                    <input autocomplete="off" spellcheck="false" type="text" placeholder=""
                                        class="ivu-input ivu-input-default" v-model="params.minPrice">
                                </div>
                                <div data-v-42e75c6e="" style="margin: 0px 5px;">~</div>
                                <div data-v-42e75c6e=""
                                    class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text">
                                    <input autocomplete="off" spellcheck="false" type="text" placeholder=""
                                        class="ivu-input ivu-input-default" v-model="params.maxPrice">
                                </div>
                                <button data-v-42e75c6e="" type="button" class="ivu-btn ivu-btn-default"
                                    @click="getGoodsList">
                                    <span>确定</span>
                                </button>
                            </div>
                        </div>


                    </div>
                    <!-- 商品列表 -->
                    <div class="goods-list">
                        <empty v-if="goodsList.length === 0" />
                        <div v-else class="goods-show-info" v-for="(item, index) in goodsList" :key="index"
                            @click="goGoodsDetail(item.goods_id)">
                            <div class="goods-show-img goods-show-img2">
                                <img width="220" height="220" alt="图片" :src="`${item.photos[0]}`" />
                            </div>
                            <div class="goods-show-detail">
                                <!-- <Tag v-if="item.salesModel && item.salesModel === 'WHOLESALE'" class="goods-show-tag"
                                    color="purple">批发</Tag> -->
                                <p>{{ item.goods_name }}</p>
                                <!-- <span>{{ item.goods_name }}</span> -->
                            </div>

                            <div class="goods-show-right">
                                <Tag class="goods-show-tag" color="red">{{ item.goodsorign }}</Tag>
                                <Tag class="goods-show-tag" color="blue">{{ item.cangku }}</Tag>
                                <Tag class="goods-show-tag" color="blue">{{ item.salesplat }}</Tag>
                            </div>

                            <div class="goods-show-price" style="font-size: 24px;">
                                <span class="item-aa">
                                    <span class="seckill-price text-danger" style="display: flex;">
                                        <div class="item-div-aa">
                                            一件代发价
                                        </div>
                                        <div class="item-div-bb">
                                            {{ item.market_price | unitPrice("￥") }}
                                        </div>
                                    </span>
                                    <span class="seckill-price text-danger">
                                        <div class="item-div-aa">
                                            分销价
                                        </div>
                                        <div class="item-div-bb">
                                            {{ item.fx_price | unitPrice("￥") }}
                                        </div>
                                    </span>
                                </span>
                            </div>

                            <div class="goods-show-num" v-if="false">
                                已有<span>{{ item.commentNum || 0 }}</span>人评价
                            </div>
                            <div class="goods-show-seller" v-if="false">
                                <span class="text-bottom" style="color: #e4393c">{{ item.storeName }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="goods-page">
                <Page show-total show-sizer @on-change="changePageNum" @on-page-size-change="changePageSize"
                    :total="total" :page-size="params.pageSize"></Page>
            </div>
        </div>
        <Spin size="large" fix v-if="loading"></Spin>
        <!-- <BaseFooter></BaseFooter> -->
        <Safedata></Safedata>
        <!-- <div style="height:60px;"></div> -->
    </div>
</template>

<script>
import GoodsClassNav from "@/components/nav/GoodsClassNav";
import * as apiGoods from "@/api/goods";
import {
    addCartGoods, cartCount
} from "@/api/cart.js";
export default {
    name: "GoodsList",
    beforeRouteEnter(to, from, next) {
        window.scrollTo(0, 0);
        next();
    },
    data() {
        return {
            sortIndex: 0, // 排序状态
            sortPriceIndex: false, // 判断价格升序还是降序
            goodsTool: [
                // 排序类型
                {
                    title: "综合",
                    en: ""
                },
                {
                    title: "选品次数",
                    en: "choose_num"
                },
                {
                    title: "新品",
                    en: "createtime"
                },
            ],
            goodsList: [], // 商品列表
            loading: false, // 加载状态
            goodsListType: "",
            total: 0, // 列表总数
            params: {
                // 请求参数
                pageNumber: 1,
                pageSize: 20,
                categoryId: "",
                goodslabel: "",
                maxPrice: '',
                minPrice: '',
                // ref: 'addtabs',
                // order: 'desc'
            },
        };
    },
    watch: {
        $route() {

            const keyword = this.$route.query.keyword;
            if (keyword) {
                this.handleSearch(keyword);
            }
            if (this.$route.query.categoryId) {
                let cateId = this.$route.query.categoryId.split(",");

                Object.assign(this.params, this.$route.query);
                this.params.categoryId = cateId[cateId.length - 1];
                this.params.goodslabel = '';
            }
            if (this.$route.query.promotionType) {
                this.params.promotionType = this.$route.query.promotionType;
            }
            if (this.$route.query.promotionsId) {
                this.params.promotionsId = this.$route.query.promotionsId;
            }
            this.getGoodsList();
        },
    },
    methods: {
        // 
        brandClick(val) {
            console.log(val);
        },
        //

        addCart(index, num = 1) {
            // 添加购物车
            const params = {
                num: 1,
                goods_id: this.goodsList[index]['goods_id'],
            };
            this.loading = true;
            addCartGoods(params)
                .then((res) => {
                    this.loading = false;
                    if (res.code == 1) {

                        this.goodsList[index]['cartnum'] = parseInt(this.goodsList[index]['cartnum']) + 1;

                        cartCount().then((ret) => {
                            // 选品库商品数量
                            this.$store.commit('SET_CARTNUM', ret.data)
                            this.Cookies.setItem('cartNum', ret.data)
                        });

                        this.$Message.success('添加成功');
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 搜索
        handleSearch(key) {
            this.params.keyword = key;
            this.params.pageNumber = 0;
            this.getGoodsList();
        },
        orderBy(data, index) {
            // 排序
            this.sortIndex = index;
            this.params.sort = data;
            this.params.order = "desc";
            if (data === "price") {
                // if (!this.sortPriceIndex) {
                //     this.sortPriceIndex = "asc";
                // } else {
                this.sortPriceIndex === "desc" ?
                    (this.sortPriceIndex = "asc") :
                    (this.sortPriceIndex = "desc");
                // }
                this.params.order = this.sortPriceIndex;
            } else {
                this.sortPriceIndex = false;
            }
            console.log(this.params);
            this.getGoodsList();
        },
        goGoodsDetail(goodsId) {
            // 跳转商品详情
            /* let routeUrl = this.$router.resolve({
                path: "/goodsDetail",
                query: {
                    goodsId
                },
            });
            window.open(routeUrl.href, "_blank"); */

            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goods_id: goodsId
                }
            })
        },
        // 分页 修改页码
        changePageNum(val) {
            this.params.pageNumber = val;
            this.getGoodsList();
        },
        // 分页 修改页数
        changePageSize(val) {
            this.params.pageNumber = 1;
            this.params.pageSize = val;
            this.getGoodsList();
        },
        searchHfn() {

            this.params = {}
            this.params.pageNumber = 1
            this.params.pageSize = 20
            this.getGoodsList()
        },
        // 获取商品列表
        getGoodsList() {
            this.loading = true;
            apiGoods
                .goodsList(this.params)
                .then((res) => {
                    this.loading = false;
                    if (res.code == 1) {
                        this.goodsList = res.data.data;
                        this.total = res.data.total;
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        getParams(val) {
            // 筛选条件回显
            Object.assign(this.params, val);
            this.getGoodsList();
        },
    },
    created() {
        if (this.$route.query.categoryId) {
            let cateId = this.$route.query.categoryId.split(",");
            Object.assign(this.params, this.$route.query);
            this.params.categoryId = cateId[cateId.length - 1];
        } else {
            Object.assign(this.params, this.$route.query);
        }
        this.getGoodsList();
        // getGoodsList()
    },
    components: {
        GoodsClassNav,
    },
};
</script>

<style scoped lang="scss">
@import "../assets/styles/goodsList.scss";

.goods-list {
    border-radius: 5px;

    .goods-show-info {
        border: #ccc 1px solid;
        border-radius: 10px;
        height: 360px;

        .goods-show-img {
            border-radius: 10px;
            padding: 3px;
            // overflow: hidden;
            width: 222px;
            height: 222px;
            border: #ccc 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 214px;
                height: 214px;
                border-radius: 10px;
            }
        }
    }

    .goods-show-detail {
        font-size: 16px;
        margin: 0;
        min-height: 48px;
        color: #333;

        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    }

    .goods-show-price {

        .item-aa {
            display: flex;
            // flex-direction: column;
            justify-content: space-evenly;

            .seckill-price {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 28px;

                .item-div-aa {
                    font-size: 14px;
                    color: #999;
                    font-weight: normal;
                }

                .item-div-bb {
                    flex: 1;
                    font-size: 18px;
                    padding-right: 10px;
                    color: #005aa0;
                    font-weight: 700;
                }


            }
        }
    }
}

.goods-show-info>.goods-show-seller>.goods-show-buyer {
    width: 35px;
    height: 17px;
    white-space: nowrap;
    line-height: 17px;
    text-align: center;
    align-content: center;
    padding: 0 3px;
    background-color: #e23a3a;
}

// .goods-show-img2 {
//     position: relative;
// }

.goods-show-right2 {
    position: absolute;
    right: 0;
    bottom: 10px
}

.tagd {
    background-color: rgba(30, 30, 30, 0%);
    height: 33px;
    border: 0;
    text-align: center;
}

.goods-show-tag {
    height: 18px;
    width: auto;
    line-height: 18px;
    white-space: nowrap;
    text-align: center;
    align-items: center;
    padding: 0 3px;
}

.goods-show-seller {
    // padding:3px 0;
    vertical-align: middle;
}

.container {
    margin: 15px auto;
    width: 1200px;
    min-width: 1000px;
    position: relative;
}

.price-sort:hover {
    color: #e23a3a;
}

.goods-box {
    display: flex;
}

/* ---------------侧边广告栏开始------------------- */
.as-box {
    width: 200px;
    border: 1px solid #ccc;
}

.goods-show-right {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    margin-right: 15px;
}

.goods-show-self {
    float: left;
    height: 16px;
    line-height: 16px;
    padding: 0 3px;
    margin-right: 3px;
    overflow: hidden;
    text-align: center;
    font-style: normal;
    font-size: 12px;
    background: #e23a3a;
    color: #fff;
    border-radius: 2px;
}

.goods-show-middle {
    float: left;
    height: 16px;
    line-height: 16px;
    padding: 0 3px;
    margin-right: 3px;
    overflow: hidden;
    text-align: center;
    font-style: normal;
    font-size: 12px;
    border: 1px solid rgba(112, 123, 187, 0.8);
    color: rgba(112, 123, 187, 0.8);
}

// .goods-show-middle:hover {
//   color: rgba(2, 15, 88, 0.6);
//   border: 0.2px solid rgba(0, 13, 87, 0.6);
//   border-radius: 4px;
//   line-height: 18px;
// }

.item-as-title {
    width: 100%;
    height: 36px;
    color: $theme_color;
    line-height: 36px;
    font-size: 18px;
}

.item-as-title span:first-child {
    margin-left: 20px;
}

.item-as-title span:last-child {
    float: right;
    margin-right: 15px;
    font-size: 10px;
    color: rgb(204, 204, 204);
}

.item-as {
    width: 160px;
    margin: 18px auto;
}

.item-as-img {
    width: 160px;
    height: 160px;
    margin: 0px auto;
}

.item-as-price span {
    font-size: 18px;
}

.item-as-intro {
    margin-top: 5px;
    font-size: 12px;
}

.item-as-selled {
    margin-top: 5px;
    font-size: 12px;
}

.item-as-selled span {
    color: #005aa0;
}

/* ---------------侧边广告栏结束------------------- */

/* ---------------商品栏开始------------------- */

.goods-list-box {
    position: relative;
    width: 100%;
    // margin-left: 15px;
    // width: calc(100% - 215px);
}

.goods-list-tool {
    width: 100%;
    height: 38px;
    border-top: 1px solid #ccc;
    background-color: #f8f8f9;
    display: flex;
    margin-top: 20px;

    .price-minmax-box {
        margin-left: 20px;
        display: flex;
        align-items: center;

        .minmax {
            display: flex;
            align-items: center;

            .ivu-input {
                width: 80px;
                height: 30px;
            }

            .ivu-btn {
                margin-left: 10px;

                // border: none;
                span {
                    border: none;

                }
            }
        }

    }
}

.goods-list-tool ul {
    padding-left: 15px;
    font-size: 12px;
    margin-top: 8px;
    height: 30px;

    li {
        height: 30px;
        display: flex;
        align-items: start;
        margin: 1px;

        span {
            display: inline-block;
            height: 20px;
            text-align: center;
            line-height: 20px;
        }
    }

    // &::after {
    //     content: "";
    //     display: block;
    //     clear: left;
    // }

    .price-sort {
        display: flex;
        align-items: start;
        justify-content: center;

        span {
            // display: inline-block;
            // vertical-align: middle;
            min-width: 60px;
            // width: 50px;
            height: 20px;
            position: relative;
            // line-height: 12px;
            // top: -1.5px;
            left: 0;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        span>div {
            display: inline-block;

            .ivu-icon {
                font-size: 12px;
                position: absolute;

                &:nth-child(1) {
                    top: 1px;
                }

                &:nth-child(2) {
                    top: 7px;
                }
            }

            .price-color {
                color: #b3b3b3;
            }
        }
    }
}

.goods-list-tool li {
    cursor: pointer;
    float: left;
}

.goods-list-tool span {
    // padding: 3px 5px;
    border: 1px solid #ccc;
    margin-left: -1px;
    background-color: #fff;
}

.goods-list-tool span:hover {
    border-color: $theme_color;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.goods-list-tool .ivu-icon {
    font-weight: bold;
    font-size: 16px;
}

.goods-list-tool-active {
    color: #fff;
    border-left: 1px solid #ccc;
    background-color: $theme_color !important;
}

/* ---------------商品栏结束------------------- */
.goods-page {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
